import React, {Component} from "react";
import {ActivityIndicator, InteractionManager, Text, TouchableOpacity, View} from "react-native";
import SelectableSectionsListView from "../../../components/SelectableSectionsListView";
import chjStyle from "../../../CustomStyle";
import ModuleCommonHeader from "../../module/ModuleCommonHeader";
import Util from "../../Util";
import CarSeriesSelection from "./CarSeriesSelection";
import CarModelSelection from "./CarModelSelection";
import {ActionConst, Actions} from "react-native-router-flux";

class SectionHeader extends Component {
    render() {
        // inline styles used for brevity, use a stylesheet when possible
        const textStyle = {
            textAlign: 'center',
            color: '#303030',
            fontWeight: '700',
            fontSize: chjStyle.getActualFontSize(32)
        };

        const viewStyle = {
            backgroundColor: '#ddd',
            height: chjStyle.getActualSizeInVertical(64)
        };
        return (
            <View style={viewStyle}>
                <Text style={textStyle}>{this.props.title}</Text>
            </View>
        );
    }
}

class SectionItem extends Component {
    render() {
        return (
            <Text style={{
                color: '#303030',
                fontWeight: '400',
                fontSize: chjStyle.getActualFontSize(36)
            }}>{this.props.title}</Text>
        );
    }
}

class Cell extends Component {
    render() {
        return (
            <TouchableOpacity style={chjStyle.textItem} onPress={this.onPress.bind(this)}>
                <Text style={chjStyle.textItemText}>{this.props.item}</Text>
            </TouchableOpacity>
        );
    }

    onPress() {
        this.props.onSelect(this.props.item);
    }
}

export default class CarBrandSelection extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: {},
            isLoading: true
        }
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(
            () => this.setState({
                data: Util.carBrand,
                isLoading: false
            })
        );
    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={chjStyle.mainContainer}>
                    <ModuleCommonHeader title='选择车辆品牌'/>
                    <ActivityIndicator
                        animating={true}
                        style={{
                            alignItems: 'center',
                            justifyContent: 'center',
                            height: chjStyle.height - chjStyle.headerHeight,
                            top: chjStyle.headerHeight
                        }}
                        size="large"/>
                </View>
            );
        }
        return (
            <View
                style={chjStyle.mainContainer}>
                <ModuleCommonHeader title='选择车辆品牌'/>
                <SelectableSectionsListView
                    style={chjStyle.recordContainer}
                    data={this.state.data}
                    initialListSize={999}
                    cell={Cell}
                    cellHeight={chjStyle.getActualSizeInVertical(128)}
                    sectionListItem={SectionItem}
                    sectionHeader={SectionHeader}
                    sectionHeaderHeight={chjStyle.getActualSizeInVertical(64)}
                    onCellSelect={this.onBrandSelect.bind(this)}
                    sectionListStyle={{width: chjStyle.getActualSizeInHorizontal(120)}}
                />
            </View>
        );
    }

    onBrandSelect(value) {
        this.props.onSelectedBrandListener(value);
        Actions.CarSeriesSelection(
            {
                type: ActionConst.REPLACE,
                name: 'CarSeriesSelection',
                component: CarSeriesSelection,
                onSelectedListener: this.onSeriesSelect.bind(this),
                data: Util.carSeries[value]
            }
        );
    }

    onSeriesSelect(value) {
        this.props.onSelectedSeriesListener(value);
        Actions.CarModelSelection(
            {
                type: ActionConst.REPLACE,
                name: 'CarModelSelection',
                component: CarModelSelection,
                onSelectedListener: this.onModelSelect.bind(this),
                data: Util.carModels[value]
            }
        );
    }

    onModelSelect(value) {
        this.props.onSelectedModelListener(value);
        Actions.pop();
    }
}
